<template>
  <div class="about">
    <div class="head">
          <div class="div" style="margin-right:40px;" @click="$router.go(-1)">
                <img src="../../assets/image/返回白@2x.png" alt="" class="percen">
                <span class="sapn1" style="color:#fff;">返回</span>
      </div>
        <div class="div csgo" style="margin-top:12px;">
            <span class="sapn2" style="color:#fff;margin-left:10px;">2020年度康复服务评价</span>
        </div>
        <div class="div cs" style="margin-left:40px" @click="ao()">
          <span class="sapn1" style="color:#fff;">保存</span>
      </div>
    </div>
    <div class="main">
        <div class="choes">
            <span>评价年度</span>
            <div class="left" @click="show1=true">
                <strong>{{main1}}</strong>
                <img src="../../assets/image/下拉灰@2x.png" alt="">
            </div>
            <van-popup v-model="show1" round position="bottom" :style="{ height: '46%' }">
                 <van-picker show-toolbar :columns="columns" @cancel="showPicker =false" @confirm="onConfirm($event)"/>
            </van-popup>
        </div>
        <div class="xian"></div>
        <div class="choes" style="height:78px;line-height: 30px;">
            <span style="margin-top:10px;">康复服务满意程度</span>
        <van-radio-group v-model="radio" class="aa" direction="horizontal">
            <van-radio name="1" class="van" style="margin-right:12px;">非常满意</van-radio>
            <van-radio name="2" class="van" style="margin-right:12px;">满意</van-radio>
            <van-radio name="3" class="van" style="margin-right:0px;">不满意</van-radio>
        </van-radio-group>
        </div >
        <div class="xian"></div>
        <div class="choes clear">
           <span style="width:154px;margin-right:98px;">
               残疾人或监护人(签名)
           </span>
           <div class="ox" @click="qian1()">
              <span style="width:66px;margin-right:0px;">查看签名</span>
              <img src="../../assets/image/更多灰@2x.png" alt="">
           </div>
        </div>
        <div class="xian"></div>
         <div class="choes" style="height:44px;">
            <span>服务效果</span>
        <van-radio-group v-model="radio1" class="aa" direction="horizontal">
            <van-radio name="1" class="van" style="margin-right:44px;">优良</van-radio>
            <van-radio name="2" class="van" style="margin-right:12px;">一般</van-radio>
            <van-radio name="3" class="van" style="margin-right:0px;">较差</van-radio>
        </van-radio-group>
        </div >
        <div class="xian"></div>
        <div class="choes clear" style="height:88px;">
            <div class="stel" style="height:88px;line-height: 30px;">下年度康复服务 建议(文字描述)</div>
            <textarea style="height:70px;margin-top:10px;width:200px;line-height: 20px;" placeholder="无" v-model="xox">

                </textarea>
        </div>
        <div class="xian"></div>

        <div class="choes">
            <span>填写日期</span>
            <div class="left" @click="show=true">
                <strong>{{main}}</strong>
                <img src="../../assets/image/下拉灰@2x.png" alt="">
            </div>
            <van-popup v-model="show" round position="bottom" :style="{ height: '46%' }">
                <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" title="选择日期" @confirm="chaa($event)"/>
            </van-popup>
        </div>
        <div class="xian"></div>
         <div class="choes clear">
           <span style="width:154px;margin-right:98px;">
               评估人(签名)
           </span>
           <div class="ox" @click="qian2()">
              <span style="width:66px;margin-right:0px;">查看签名</span>
              <img src="../../assets/image/更多灰@2x.png" alt="">
           </div>
        </div>
        <div class="xian"></div>
    </div>
  </div>
</template>
<script>
import {bilitataionById, litationEvaluation} from '../../apiCanJi/apiCanji'

export default {
  data () {
    return {
      minDate: new Date(1000, 0, 1),
      maxDate: new Date(2020, 10, 10),
      currentDate: new Date(),
      main: '2020-5-25',
      show: false,
      show1: false,
      main1: '',
      columns: ['2020年度', '2019年度', '2018年度', '2017年度', '2016年度', '2015年度', '2014年度', '2013年度', '20212年度', '2011年度', '2010年度'],
      radio: '1',
      radio1: '1',
      xox: ''
    }
  },
  methods: {
    chaa (e) {
      this.show = false
      this.main = this.formatDate(this.currentDate)
    },
    onConfirm (e) {
      this.show1 = false
      this.main1 = e
    },
    formatDate (date) {
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      // var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD
    },
    aa () {
      var ido = this.$route.query.id
      console.log(ido)
      bilitataionById({id: 1}).then(res => {
        //   var a=res.manyichengdu+1
        console.log(res)
        this.main1 = res.pingjianiandu
        this.radio = res.manyichengdu + 1
        this.radio = this.radio.toString()
        this.radio1 = res.fuwuxiaoguo + 1
        this.radio1 = this.radio.toString()
        this.main = res.pinggutime
        this.xox = res.fuwujianyi
      })
    }
  },
  created () {
    this.aa()
  }
}
</script>
<style scoped>
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.clear {
  zoom: 1;
}
.head{
  width: 375px;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F1 0%, #1DC7F1 100%);
}
.about{
    position: relative;
}
.percen{
  width: 15px;
  height: 15px;
  margin: 15px 5px 0px 15px;
}
.span1{
  width: 59.5px;
  height: 14.5px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  float: left;
}
.div {
  float: left;
  margin-top: 10px;

}
.span2{
  width: 67px;
  height: 16px;
  font-size: 17px;
  font-family: PingFang SC;
  float: left;
  font-weight: bold;
}
.head .percen{
  width: 7px;
  height: 13px;
  margin: 5px 5px 0px 15px;
}
.cs{
    float: right;
    margin-right: 14.5px;
}
.choes{
    width: 100%;
    height: 44px;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    line-height: 44px;
}
.choes span{
    width: 60px;
    margin-left: 15px;
    margin-right: 15px;
    float: left;
}
.choes strong{
    margin-left: 15px;
    margin-right: 15px;
    float: left;
    color: #333;
    font-weight: normal;
}
.aa{

    float: left;
    width: 280px;
    margin-top: 14px;
}
.van{
    margin-right: 53.5px;
}
.left{
   float: right;
   margin-right: 19px;
}
.left span{
    margin-right: 12.2px;
    color: #999;

}
.left img{
    width: 13px;
    height: 7px;
}
.xian{
    width: 360px;
    border-top: 0.5px solid #000;
    transform:scaleY(0.25);
    margin-left: 15px;
}
.ox{
    float: left;
}
.ox img{
    width: 7px;
    height: 13px;
}
.stel{
    width: 114px;
height: 41px;
font-size: 15px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
    margin-left: 15px;

    float: left;
}
input{
    float: left;
}
</style>
